<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>千峰商城</title>
    <script src="../utils/flexible.js"></script>
    <script src="../utils/getUrlParams.js"></script>
    <script src="../utils/debounce.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/brand.css" />
    <link rel="icon" href="../assets/imgs/facicon.ico" type="image/x-icon" />
  </head>
  <style type="text/css">
    @font-face {
      font-family: "qmt";
      src: url(../assets/font/qmt.ttf);
    }
    body {
      font-family: qmt;
    }
  </style>
  <body>
    <div class="header" id="top">
      <img src="../assets/imgs/header_logo.png" alt="" />
      <img src="../assets/imgs/header_app.png" alt="" />
    </div>
    <div class="searchbox">
      <input type="text" placeholder="请输入你想比价的产品" />
      <button style="color: white">
        <div style="font-family: qmt">搜索</div>
      </button>
    </div>

    <div class="nav">
      <a href="../index.html">首页</a> > <a class="categoryAll">全部分类</a> >
      <a class="replace" href="">电视</a> >
      <button>筛选</button>
    </div>

    <div class="container">
      <ul></ul>
    </div>

    <div class="footer">
      <div class="more">
        <a>更多优惠信息>></a>
      </div>
      <div class="chart">
        <span>品牌排行</span>
      </div>
      <ul>
        <li>登入</li>
        <li>注册</li>
        <li><a href="#top" style="color: black">返回顶部</a></li>
      </ul>
      <p>手机APP下载 万锋智慧商城手机版 -- 掌上比价平台</p>
      <p>chst.vip:8081/crm</p>
    </div>

    <script>
      let href = {};
      let page;
      let flag = true;
      init();

      function init() {
        href = getUrlParams(location.href);
        page = 20;
        $(".nav .replace")
          .attr("categoryid", href.brandtitleid)
          .text(href.title);
        $(".categoryAll").click(function () {
          location.href = "./brandtitle.html";
        });
        ajax();
        $(window).on("scroll", scrollHandler);
      }

      function scrollHandler(e) {
        // console.log($(window).scrollTop());
        // console.log($("html").height());
        // console.log($("html")[0].clientHeight);
        if (
          $("html").height() -
            $(window).scrollTop() -
            $("html")[0].clientHeight <
          600
        ) {
          if (flag) {
            page += 10;
            ajax();
          }
          flag = false;
        } else {
          flag = true;
        }
      }

      function ajax() {
        $.ajax({
          url: "http://chst.vip:1234/api/getbrandproductlist",
          data: {
            brandtitleid: href.brandtitleid,
            pagesize: page,
          },
        }).then((res) => {
          console.log(res);
          creatLi(res.result);
          $(".container >ul").on("click", "li", clickLihandler);
        });
      }

      function clickLihandler(e) {
        let productid = $(this).attr("productid");
        let productname = $(this).find("p").first().text().trim();
        let categoryid = $(".nav .replace").attr("categoryid");
        let categoryname = $(".nav .replace").text();
        console.log(categoryid, categoryname, productid, productname);
        location.href =
          "./productdetails.html?productid=" +
          productid +
          "&productname=" +
          productname.split(" ")[0] +
          "&categoryname=" +
          categoryname +
          "&categoryid=" +
          categoryid;
      }

      function creatLi(data) {
        let html = "";
        data.forEach((item) => {
          html += `
                <li productid="${item.productId}">
                    ${item.productImg}
                    <div class="right">
                        <p>
                            ${item.productName}
                        </p>
                        <p>${item.productPrice}</p>
                        <span>${item.productQuote}</span> <span>${item.productCom}</span>
                    </div>
                </li>
                `;
        });
        $(".container ul").html(html);
        console.log(href);
      }
    </script>
  </body>
</html>
